<style lang="scss" scoped>
    .place-wrap{
        overflow: hidden;
    }
    h2.title {
        font-size: 24px;
        margin-left: 28px;
        margin-top: 40px;
    }
    .place-choice{
        padding-left: 27px;
        .choices {
            padding: 19px 0 17px 0;
            border-bottom: 1px solid #979797; /*no*/
            background: url("/static/arrow-right.png") 97% 50% no-repeat;
            .choice-name{
                font-size: 14px;
                width: 90%;
                margin-bottom: 7px;
                margin-left: 1px;/*no*/
            }
            .choice-item {
                font-size: 0px; /*no*/
                color: $gray;
                width: 90%;
                margin-left: 1px;/*no*/
                .item{
                    font-size: 12px; /*no*/
                    &:after{
                        content: '\007C';
                        margin: 0 5px;
                    }
                    &:last-child{
                        &:after{
                            content: '';
                            margin: 0;
                        }
                    }
                }
            }
        }
    }
    .common-btn{
        margin-left: 27px;
        margin-top: 86px;
    }
    .city-layer{
        position: absolute;
        z-index: 12;
        width: 100%;
        min-height: 100%;
        top: 0;
        left: 0;
        background: #ffffff;
        padding-top: 40px;
        box-sizing: border-box;
        .title-wrap {
            font-size: 0;
            margin-left: 28px;
            .title {
                font-size: 24px;
                color: #9B9B9B;
            }
            .second-title {
                font-size: 24px;
            }
        }
        .common-btn{
            margin: 40px 28px;
        }
        .hot-city-list {
            padding-left: 28px;
            display: flex;
            flex-wrap: wrap;
            .items {
                width: 154px;
                background: #F6F6F6;
                height: 40px;
                margin-bottom: 15px;
                font-size: 12px;
                text-align: center;
                color: #9B9B9B;
                line-height: 40px;
                border-radius: 4px;
                margin-right: 12px;
                &.selected{
                    background: $bgColor;
                    color: $white;
                }
            }
        }
        .list-title {
            background: #E8E8E8;
            font-size: 12px;
            padding-left: 28px;
            height: 26px;
            line-height: 26px;
        }
        .city-item {
            padding-left: 28px;
            font-size: 12px;
            color: #9b9b9b;
            height: 40px;
            line-height: 40px;
        }
        .input-query{
            margin-bottom: 36px;
            input{
                width: 320px;
                margin-left: 27px;
                height:44px;
                border:none;
                outline: none;
                text-indent: 44px;
                background: #F6F6F6 url("/static/search.png") 10px 50% no-repeat;
                border-radius: 4px;
            }
        }
        .query-list{
            .title{
                font-size: 12px;
                color: $gray;
                margin-left: 28px;
            }
        }
        .common-title{
            margin: 42px 0 24px 0;
        }
    }
</style>

<template>
    <div class="place-wrap">
        <h2 class="title">查找场地</h2>
        <div class="place-choice">
            <div class="choices" @click="showCity = true">
                <p class="choice-name">目的地</p>
                <p class="choice-item">
                    <span class="item" v-for="(item,i) in destinationsOptions" v-if="item.selected">{{ item.name }}</span>
                </p>
            </div>
            <div class="choices" @click="setLayer('容纳人数',numOptions,false)">
                <p class="choice-name">容纳人数</p>
                <p class="choice-item">
                    <span class="item" v-for="(item,i) in numOptions" v-if="item.selected">{{ item.name }}</span>
                </p>
            </div>
            <div class="choices" @click="setLayer('特殊要求',requestsOptions,true)">
                <p class="choice-name">特殊要求</p>
                <p class="choice-item">
                    <span class="item" v-for="(item,i) in requestsOptions" v-if="item.selected">{{ item.name }}</span>
                </p>
            </div>
        </div>
        <mt-button type="primary" @click="query" class="sure-btn common-btn">搜 索</mt-button>
        <choice v-show="showLayer" @selectItem="selectItem" :targetOptions="targetOptions"></choice>
        
        <div class="city-layer" v-show="showCity">
            <h2 class="title-wrap">
                <span class="title">查找场地/</span>
                <span class="second-title">目的地</span>
            </h2>
            <h2 class="common-title"><span>热门目的地</span></h2>
            <ul class="hot-city-list">
                <li class="items" v-for="(item,i) in hotCity" :class="{selected: item.selected}" @click="selectCity(item,i)">
                    {{item.name}}
                </li>
            </ul>
            <h2 class="common-title"><span>目的地列表</span></h2>
            <div class="input-query">
                <input type="text" v-model="queryValue" placeholder="搜索目的地" @change="queryCity">
            </div>
            <div class="query-list" v-if="searchList.length">
                <p class="title">搜索结果：</p>
                <ul class="city-list">
                    <li class="city-item" v-for="(city,j) in searchList" :key="j+'city'">{{ city.name }}</li>
                </ul>
            </div>
            <div class="city-list">
                <div class="list-item" v-for="(item,i) in cityList" :key="i">
                    <div class="list-title">{{ item.indexName }}</div>
                    <ul class="city-list">
                        <li class="city-item" v-for="(city,j) in item.citys" :key="j+'city'">{{ city.name }}</li>
                    </ul>
                </div>
            </div>
            
            <mt-button type="primary" class="sure-btn common-btn">确 定</mt-button>
        </div>
        <footer-component activeItem="query"></footer-component>
    </div>
</template>

<script>
    import Choice from '@/views/choice'
    import FooterComponent from '@/views/footer'
    export default {
    	components: {
    	    Choice,
            FooterComponent
        },
        computed: {
            filterResult(){
            	let result = this.allCity.map(item => {
            		return item.name
                })
                return result.filter(value => new RegExp(this.queryValue, 'i').test(value))
                
            }
        },
    
        filters: {},
        data() {
            return {
                queryValue: '',
            	showLayer: false,
                showCity: false,
            	targetOptions:{
            	    title: '查找场地',
                    secondTitle: '',
                    multipleChoice: false,   // 多选
                    choiceList: [],
                },
                destinationsOptions: [
                ],
                numOptions: [
                    {
                        name: '50人以下',
                    },
                    {
                        name: '50-100人',
                    },
                    {
                        name: '300以上',
                    },
                ],
                requestsOptions: [
                    {
                    	name: '泳池',
                    },
                    {
                    	name: '餐饮'
                    },
                    {
                    	name: '无立柱'
                    }
                ],
                searchList: [],
                hotCity: [
                    {
                    	name: '上海'
                    },
                    {
                        name: '北京',
                        selected: true
                    },
                    {
                        name: '杭州'
                    }
                ],
                cityList: [
                    {
                        indexName: 'ABCDEF',
                        citys: [
                            {
                            	name: '阿富汗'
                            },
                            {
                                name: '重庆'
                            }
                        ]
                    },
                    {
                        indexName: 'GHIJ',
                        citys: [
                            {
                                name: '广东'
                            },
                            {
                                name: '杭州'
                            }
                        ]
                    }
                    
                ]
            };
        },
        mounted() {
    		
        },
        methods: {
            setLayer(secondTitle,choiceList,multipleChoice){
            	this.targetOptions.secondTitle = secondTitle
                this.targetOptions.choiceList = choiceList
                this.targetOptions.multipleChoice = multipleChoice
                
                this.showLayer = true
            },
            
            selectCity(item,i){
            
            },
            
            //查询城市
            queryCity(){
                this.searchList = this.hotCity
            },
            
            
            selectItem(item){
                this.targetOptions.choiceList = item
                this.showLayer = false
            },
            
            //搜索匹配酒店
            query(){
                //
            }
        }
    };
</script>

